import Taro, { Component } from '@tarojs/taro'
import { View,  Text, RadioGroup, Label, Radio } from '@tarojs/components'
import PropTypes from 'prop-types'

import './curtainRadio.scss'

/**
 * @description 自定义弹出单选组（仿头条）
 * @author huangkh
 */
class CurtainRadio extends Component {

    constructor(props){
        super(props)
    }

    render() {
        const { dataList, tipShow, onHideTip, onChange, groupName } = this.props
        return (
            <View className={tipShow ? 'cr-container' : 'h'}>
                <View className='cr-bg'></View>
                <View className='cr-content'>
                    <RadioGroup onChange={onChange} name={groupName} className='cr_radiogroup'>
                            {
                                dataList.map((item,index)=>{
                                    return (
                                        <Label className={item.checked ? 'cr-row-selected' : 'cr-row'} key={item+index}>
                                            <Text>{item.text}</Text>
                                            <Radio value={item.value +':' +item.text} checked={item.checked} color='#fd5e5d'></Radio>
                                        </Label>
                                    )
                                })
                            }
                    </RadioGroup>
                    <View className='cr-btn' onClick={onHideTip}>
                        <Text>取消</Text>
                    </View>
                </View>
            </View>
        )
    }
}

CurtainRadio.propTypes = {
    groupName : PropTypes.string.isRequired,
    tipShow : PropTypes.bool.isRequired,
    dataList : PropTypes.array.isRequired,
    onChange : PropTypes.func.isRequired,
    onHideTip : PropTypes.func.isRequired
}

CurtainRadio.defaultProps = {
    groupName : '',
    tipShow : false,
    dataList : [{value:'',text:'',checked:false}],
    onChange : ()=>{},
    onHideTip : ()=>{}
}

export default CurtainRadio